<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
<ui:component>
    <style type="text/css">
        .left {
            float: left;
            text-align: left;
        }

        .right {
            float: right;
            text-align: right;
        }
    </style>
    <center>
        <h:panelGrid columns="1" columnClasses="left">
            <h:outputLabel value="This will changes your name"/>
            <h:panelGrid columns="2">
                <h:outputLabel value="#{resources.firstNameLabel}:"/>
                <h:inputText value="#{accountEditBean.firstname}" validatorMessage="Firstname not valid." required="true">
                    <f:validator validatorId="alphaValidator"/>
                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>
                <!--<h:outputLabel value="#{resources.middleNameLabel}:"/>-->
                <!--<h:inputText value=""/>-->
                <h:outputLabel value="#{resources.lastNameLabel}:"/>
                <h:inputText value="#{accountEditBean.lastname}" validatorMessage="Lastname not valid." required="true">
                    <f:validator validatorId="alphaValidator"/>
                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>

                <h:column/>
                <rich:messages/>

                <h:column/>
                <a4j:commandButton value="Save Changes" action="#{accountEditBean.changeName}"  reRender="changerMessage, fullName"/>
            </h:panelGrid>

        </h:panelGrid>
    </center>
</ui:component>


</html>
